<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>资源管理</title>
    <!-- 引入 SockJS 和 Stomp.js 库 -->
    <script src="https://cdn.jsdelivr.net/npm/sockjs-client@1.5.1/dist/sockjs.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/stompjs@2.3.3/lib/stomp.min.js"></script>
    <link href="/css/styles.css" rel="stylesheet">
    <script>
        let isLoggedIn = [[${isLoggedIn}]];
    </script>
</head>
<body>
<div class="container">
    <!-- 将 h1 包装在 a 标签内 -->
    <a class="login-link" href="/login">
        <h1>资源管理</h1>
    </a>

    <!-- 显示消息信息 -->
    <div class="message" id="messageContainer" style="display: none;">
        <p id="messageText"></p>
    </div>

    <!-- 文件上传表单 -->
    <div class="form-container" id="uploadDiv" th:if="${isLoggedIn}">
        <div class="form-group">
            <label for="folderName">文件夹名称：</label>
            <input id="folderName" name="folderName" placeholder="输入文件夹名称，可为空" type="text">
        </div>
        <div class="form-group">
            <label for="files">文件夹：</label>
            <!-- HTML5 的 webkitdirectory 属性允许选择文件夹 -->
            <input id="files" multiple name="files" type="file" webkitdirectory>
        </div>
        <div class="form-group-fullwidth">
            <label for="removeOldFiles">删除服务器上同名目录中不存在的文件：</label>
            <label class="switch">
                <input checked id="removeOldFiles" name="removeOldFiles" type="checkbox">
                <span class="slider"></span>
            </label>
        </div>
        <div class="form-group">
            <button id="uploadButton" type="button">上传文件夹</button>
        </div>
    </div>

    <!-- 进度条显示上传进度 -->
    <div class="progress-container" th:if="${isLoggedIn}">
        <!-- 前端文件上传进度条 -->
        <label for="upload-progress">文件上传进度:</label>
        <progress id="upload-progress" max="100" value="0"></progress>

        <!-- 后端文件处理进度条 -->
        <label for="processing-progress">文件处理进度:</label>
        <progress id="processing-progress" max="100" value="0"></progress>
    </div>

    <!-- 列表显示已上传的资源树 -->
    <ul class="file-tree" id="fileTree"></ul>
</div>
</body>
<script defer src="/js/upload.js"></script> <!-- 引用独立的 JavaScript 文件 -->
</html>
